<template>
  <div>
    <!-- v-model:将文本框的value属性和数据变量双向绑定 -->
    <!-- 注意事项:v-model 暂时只用在表单元素上 -->
    用户名: <input type="text" v-model="username" /><br />
    密 码: <input type="text" v-model="password" /><br />
    <!-- 下拉框的 v-model会将option的value绑定给数据变量  -->
    来自于:
    <select v-model="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="cx">曹县</option></select
    ><br />
    <!-- 复选框的特点
    1.双向绑定的数据是数组 
    会将勾选的复选框value值添加到数组中
    2.双向绑定的数据是非数组(隐式转换为boolean)
    会将勾选状态同步给数据变量
    结论  如果绑定的是数组 那就是绑定的value的属性值
          如果是绑定的是非数组 就是checked的属性
    -->
    爱好:
    <input v-model="a" type="checkbox" value="smoke" />黄
    <input v-model="b" type="checkbox" value="smoke" />赌
    <input v-model="c" type="checkbox" value="smoke" />毒<br />
    性别:
    <input v-model="gender" type="radio" name="gender" value="" />男
    <input v-model="gender" type="radio" name="gender" value="" />女 <br />
    自我介绍:
    <textarea v-model="intro" cols="30" rows="10"></textarea>
  </div>
</template>

<script>
export default {
  name: "WorkApp",

  data() {
    return {
      username: "",
      password: "",
      city: "cx",
      hobby: [],
      a: true,
      b: false,
      c: false,
      gender: "",
      intro: "",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>